import { Button, Modal, Form, Input } from 'antd';
import { useState,forwardRef, useImperativeHandle, useRef, useEffect } from 'react';
import { addusers,updateUsers } from '../../../api/user';
// form表单hooks 用来获取表单实例对象
function AddOrUpdate(props:{over:Function},ref:any) {
    let formRef:{current:any} = useRef();
    // 定义控制对话框显示与隐藏状态
    let [isModalOpen, setIsModalOpen] = useState(false);
    let [recoder,setRecoder] = useState<UsersTableItem | null>(null)
    // 点击取消时调用
    let handleCancel = () => {
        setIsModalOpen(false)
        // 重置表单
        formRef.current.resetFields();
    }
    let onFinish =async (data:AddUsersParams) => {
        console.log(data)
        // 判断当前是否为修改用户
        if(recoder){
            // 修改用户
            let res = await updateUsers(recoder.id,data)
             // 修改状态关闭对话框
           setIsModalOpen(false)
            // 请求成功通知父组件并将请求到的数据传递给父组件
           props.over(res)
            return
        }
        // console.log("数据校验通过")
        // 获取输入框内容
        // console.log(data)
        // 发送请求添加用户
        let res:ResponsType = await addusers(data)
        // 修改状态关闭对话框
        setIsModalOpen(false)
        // 请求成功通知父组件并将请求到的数据传递给父组件
        props.over(res)
    }
    // 定义初始化方法 谁调用就显示对话框
    let init = (recoder:UsersTableItem)=>{
        console.log(recoder)
        setIsModalOpen(true)
        if(recoder){
            // 编辑用户呀
            setRecoder(recoder);
        }else{
            //添加用户
            setRecoder(null)
        }
    }
    // 将init初始化方法暴露给父组件
    useImperativeHandle(ref,()=>{
        return {
            init
        }
    })
    useEffect(()=>{
        if(recoder){
            formRef.current.setFieldsValue({
                username:recoder.username,
                email:recoder.email,
                mobile:recoder.mobile
            })
        }
    },[recoder])
    return (
        <Modal title={recoder?'编辑用户':"添加用户"} open={isModalOpen}  onCancel={handleCancel} footer={null}>
            <Form
                name="basic"
                labelWrap
                labelCol={{ span: 4 }}
                style={{ width: '100%' }}
                onFinish={onFinish}
                autoComplete="off"
                ref={formRef}
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[{ required: true, message: '请输入用户名' }]}
                >
                    <Input disabled={recoder?true:false}/>
                </Form.Item>

               {
                !recoder && <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: '请输入密码' }]}
            >
                <Input.Password/>
            </Form.Item>
               }
                <Form.Item
                    label="邮箱"
                    name="email"
                    rules={[{ required: true, message: '请输入邮箱',type:"email"}]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="手机号"
                    name="mobile"
                    rules={[{ required: true, type:"number",validator:(_,value:number | string)=>{
                        if(/^1[3456789]\d{9}$/.test(value as string)){
                            return Promise.resolve()
                        }
                        return  Promise.reject("请输入正确手机号码")
                    }}]}
                >
                    <Input />
                </Form.Item>

                <div style={{width:"100%",textAlign:"right"}}>
                    <Button onClick={handleCancel}>取消</Button> &nbsp;&nbsp;
                    <Button type="primary" htmlType="submit">
                        {
                            recoder?'确认修改':'确认添加'
                        }
                    </Button>
                </div>
            </Form>
        </Modal>
    )
}

export default forwardRef(AddOrUpdate);